<div id="latest">
    <div class="product-title" id="fixedTop">
        <div>{{ heading_title }}</div>
        <div><a href="/newproduct">查看全部</a><i class="iconfont icon-gengduo"></i></div>
    </div>
    <div class="product-content" id="productBox">
        {% for product in products %}
            <div class="product-layout">
                <div class="product-thumb transition">
                    <div class="image">
                        {% if product.saveoff %}
                            <div class="discount">
                                <span class="discount-num">{{ product.saveoff }}</span>
                                <span class="discount-text">折</span>
                            </div>
                        {% endif %}
                        <a href="{{ product.href }}"><img src="{{ product.thumb }}" alt="{{ product.name }}"
                                                          title="{{ product.name }}" class="img-responsive"/></a>
                    </div>

                    <div class="caption">
                        <div style="height: 34px;">
                            <h4><a href="{{ product.href }}"><span class="shangcheng">商城</span>{{ product.name }}</a>
                            </h4>
                        </div>
                        {% if product.price %}
                            <p class="price">
                                {% if not product.special %}
                                    {{ product.price }}
                                {% else %}
                                    <span class="price-old">{{ product.price }}</span>
                                    <span class="price-new">{{ product.special }}</span>
                                {% endif %}
                            </p>
                        {% endif %}
                        <div class="like">
                            <div class="praise" onclick="praiseClick(this)" data-rel="{{ product.product_id }}" data-rev="{{ product.product_id }}"><i
                                        class="iconfont icon-zan"></i>{{ product.praise }}</div>
                            <div>
                                {% if product.rating %}
                                    <div class="rating stars">
                                        {% for i in 1..5 %}
                                            {% if product.rating < i %}
                                                <span class="star fa fa-stack">
                                                <i class="star fa fa-star-o fa-stack-2x"></i>
                                            </span>
                                            {% else %}
                                                <span class="star fa fa-stack">
                                                <i class="star fa fa-star fa-stack-2x"></i>
                                                <i class="star fa fa-star-o fa-stack-2x"></i></span>
                                            {% endif %}
                                        {% endfor %}
                                    </div>
                                {% endif %}
                                {% if product.reviews %}
                                    ({{ product.reviews }})
                                {% endif %}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        {% endfor %}
    </div>
    <div id="getMoreData">加載更多</div>
    <div class="nothing" style="display: none">沒有數據了</div>
</div>
<script>
    // 吸頂
    // var offsetT = $('#fixedTop').offset().top
    // window.onscroll = function () {
    //     if ($(window).scrollTop() >= offsetT) {
    //         $('#fixedTop').css('position', 'fixed');
    //     } else {
    //         $('#fixedTop').css('position', 'relative');
    //     }
    // }


    function praiseClick (_this) {

        var product_id = _this.dataset.rel; //获取HTML页面POST过来的article_id

        var cat_id = _this.dataset.rev; //获取HTML页面POST过来的cat_id

        $.ajax({

            type: "POST",

            url: "{{ praiseurl }}",

            data: "product_id=" + product_id + "&cat_id=" + cat_id,//数据拼接

            cache: false, //不缓存此页面

            success: function (data) {
                if (data.mesage == '點贊成功') {
                    $(_this).html('<i class="iconfont icon-zan"></i>' + data.num); //显示data并局部刷新
                    alert(data.mesage);
                } else {

                    alert(data.mesage);
                }


            },
            error: function () {

                alert("error");

            }

        });

    };


</script>
<script>
    var i = 2;
    $('#getMoreData').on('click', function () {
        if ($(this).text() === '加載更多') {
            $(this).text('加載中....');
            var _this = $(this);
            $.ajax({
                url: 'index.php?route=product/category/moreproduct&limit=8&page=' + i,
                success: function (res) {
                    if(res === ''){
                        $('#getMoreData').remove();
                        $('.nothing').show();
                        return;
                    }
                    var data = JSON.parse(res).products;
                    var tag = '';
                    for (var j = 0; j < data.length; j++) {
                        tag += '<div class="product-layout"><div class="product-thumb transition"><div class="image">';
                        if (data[j].saveoff) {
                            tag += '<div class="discount"><span class="discount-num">' + data[j].saveoff + '</span><span class="discount-text">折</span></div>';
                        }
                        tag += '<a href="' + data[j].href + '"><img src="' + data[j].thumb + '" alt="' + data[j].name + '" title="' + data[j].name + '" class="img-responsive"/></a></div><div class="caption"><div style="height: 34px;"><h4><a href="' + data[j].href + '"><span class="shangcheng">商城</span>' + data[j].name + '</a></h4></div>';
                        {#{% if product.price %}#}
                        if (data[j].price) {
                            tag += '<p class="price">';
                            if (!data[j].special) {
                                tag += data[j].price;
                            } else {
                                tag += '<span class="price-old">' + data[j].price + '</span><span class="price-new">' + data[j].special + '</span>';
                            }
                            tag += '</p>';
                        }
                        tag += '<div class="like"><div class="praise" onclick="praiseClick(this)" data-rel="' + data[j].product_id + '" data-rev="' + data[j].product_id + '"><i class="iconfont icon-zan"></i>' + data[j].praise + '</div><div>';
                        if (data[j].rating) {
                            tag += '<div class="rating stars">';
                            for (var k = 1; k <= 5; k++) {
                                if (data[j].rating < k) {
                                    tag += '<span class="star fa fa-stack"><i class="star fa fa-star-o fa-stack-2x"></i></span>';
                                } else {
                                    tag += '<span class="star fa fa-stack"><i class="star fa fa-star fa-stack-2x"></i><i class="star fa fa-star-o fa-stack-2x"></i></span>';
                                }
                            }
                            tag += '</div>';
                        }
                        if (data[j].reviews) {
                            tag += '(' + data[j].reviews + ')';
                        }
                        tag += '</div></div></div></div></div>';
                    }
                    $('#productBox').append(tag);
                    i++;
                    if (data.length < 8) {
                        $('#getMoreData').remove();
                        $('.nothing').show();
                        return;
                    }
                    _this.text('加載更多');
                }
            })
        }
    })
</script>